<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    页数
    <el-input v-model="pagecurrent" placeholder="请输入内容" style="width: 200px;"></el-input>

    几条数据
    <el-input v-model="pagesize" placeholder="请输入内容" style="width: 200px;"></el-input>

    username
    <el-input v-model="pageuser.username" placeholder="请输入内容" style="width: 200px;"></el-input>

    gender
    <el-input v-model="pageuser.gender" placeholder="请输入内容" style="width: 200px;"></el-input>

    email
    <el-input v-model="pageuser.email" placeholder="请输入内容" style="width: 200px;"></el-input>
    <el-button @click="find">查询</el-button>
    <el-button @click="add">添加</el-button>

    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="id"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
                    </el-button>
                    <el-button type="danger" size="mini" @click="handleClose(scope.row)">删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
    </template>


    <el-button round @click="find">find</el-button>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagecurrent"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <el-dialog
            title="添加用户"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">

        <el-form :model="formData">
            <el-row>
                <el-col>
                    <el-form-item label="序号">
                        <el-input v-model="formData.id"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="用户名">
                        <el-input v-model="formData.username"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="性别">
                        <el-input v-model="formData.gender"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.email"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleAdd">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
            title="修改用户"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleUpdate">

        <el-form :model="formData">
            <el-row>
                <el-col>
                    <el-form-item label="序号">
                        <el-input v-model="formData.id"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="用户名">
                        <el-input v-model="formData.username"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="性别">
                        <el-input v-model="formData.gender"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.email"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleAdd">确定</el-button>
      </span>
    </el-dialog>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            formData: {},
            tableData: [],
            dialogVisible: false,
            pagesize: 1,
            pagecurrent: 1,
            total: 1,

            pageuser: {
                "username": "",
                "gender": "",
                "email": ""
            }
        },

        created() {
            this.find();
        }, methods: {
            find() {
                axios.post("/users/" + this.pagecurrent + "/" + this.pagesize, this.pageuser).then(res => {
                    if (res.data.flag === true) {
                        this.$message.success(res.data.message);
                        this.total = res.data.data.total;
                        this.tableData = res.data.data.r;
                    } else {
                        this.$message.error(res.data.message);
                    }
                    // this.total = res.data.total;
                    // this.tableData = res.data.users;
                })
            },
            handleClick(row) {
                console.log(row);
            },
            handleUpdate(row) {
                axios.put("/users", this.formData).then(res => {
                    //res(flag,message,data=null)
                    console.log(row)
                    if (res.data.flag == true) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                this.dialogVisible = false;
            },
            handleCurrentChange(page) {
                this.pagecurrent = page;
                this.find();
            }, handleSizeChange(size) {

                this.pagesize = size;
                this.find();
            },
            cancel() {
                this.dialogVisible = false;
            },
            handleAdd() {
                axios.post("/users", this.formData).then(res => {
                    //res(flag,message,data=null)
                    if (res.data.flag == true) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                this.dialogVisible = false;

            },
            add() {
                this.formData = {};
                this.dialogVisible = true;
            }, handleClose(row) {
                this.$confirm("?", "!", {type: "warning"}).then(() => {
                    axios.delete("/users/" + row.id).then(res => {
                        if (res.data.flag == true) {
                            this.$message.success(res.data.message)
                        } else {
                            this.$message.error(res.data.message)
                        }
                        this.find()
                    })
                })

            }

        }
    })
</script>
</div>
</body>
</html>